<template>
    <el-row class="cdetail-row">
        <el-col :span="24">
            <el-card class="box-card tinfo-head-box">
                <div slot="header" class="clearfix">
                    <div class="tinfo-title-header-box" style="background-image:url('/static/img/illustration/i004.jpg')">
                    </div>
                </div>
                <el-row class="user-title-row">
                    <el-col :span="24">
                        <div class="T-headImage-box">
                            <div class="T-headImage">
                                <img src="/static/img/userImage.png" alt="">
                            </div>
                        </div>
                        <div v-if="datas.length > 0" class="T-name-box">
                            <h3>{{datas[0].knowledgePointName || '未知'}}</h3>
                            <span>{{datas[0].sectionName || '未知'}}</span>
                        </div>
                        <div class="clear"></div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="24">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span @click="cardType=1" class="check-card-btn">必读文章</span><span @click="cardType=2" class="check-card-btn">推荐文章</span>
                </div>
                <div v-show="cardType===1" >
                    <el-row v-if="datas.length > 0">
                        <el-col :span="24">
                            <div v-for="data in datas" class="article-content-col-box">
                                <h3 @click="$router.push({path:'/adetail?a='+data.id})"><i class="el-icon-star-off"></i>{{data.title}}</h3>
                                <div class="article-content">
                                    <p>{{data.remark}}</p>
                                    <div class="bottom">
                                        <span style="float: right">浏览人数：{{data.visitorsIds.length}}</span>
                                        <span class="clear"></span>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <!--工具条-->
                        <el-col v-if="listLoading1" :span="24" class="toolbar">
                            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange1" :page-size="20" :total="total1" style="float:right;">
                            </el-pagination>
                        </el-col>
                    </el-row>
                    <el-row v-else>
                        <el-col :span="24">
                            <p class="no-data-box">没有数据</p>
                        </el-col>
                    </el-row>
                </div>
                <div v-show="cardType===2" >
                    <el-row v-if="recommendDatas.length > 0">
                        <el-col :span="24">
                            <div v-for="(data,index) in recommendDatas" class="article-content-col-box">
                                <h3 @click="$router.push({path:'/adetail?a='+data.id})"><i class="el-icon-star-off"></i>{{recommendDatas.title}}</h3>
                                <div class="article-content">
                                    <div class="bottom">
                                        <template style="float: left">
                                            <span v-for="tag in tagArr(index)" class="tag-box">{{tag}}</span>
                                        </template>
                                        <span class="clear"></span>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row v-else>
                        <el-col :span="24">
                            <p class="no-data-box">没有数据</p>
                        </el-col>
                    </el-row>
                    <!--工具条-->
                    <el-col v-if="listLoading2" :span="24" class="toolbar">
                        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange2" :page-size="20" :total="total2" style="float:right;">
                        </el-pagination>
                    </el-col>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
  import {getArticleList} from '../../api/api';
  export default {
    data() {
      return {
        datas: [],
        recommendDatas: [],
        cardType: 1,

        total1: 0,
        total2: 0,

        page1: 0,
        page2: 0,

        listLoading1: false,
        listLoading2: false,
        userId: '',
        userName: '',
        nodeId: '',

      };
    },

    methods: {
      handleCurrentChange1(val) {
        this.page1 = val;
        this.getData(this.nodeId);
      },

      handleCurrentChange2(val) {
        this.page2 = val;
      },

      getData(val){
        let para = {
          count: 10,
          pageNo: this.page1,
          sortDirection: 'asc',
          sortField: ["createDate"],
          knowledgePointId: val,
          authorId: '',
          content: '',
          tag: '',
          title: '',
          atype: 2
        };
        getArticleList(para).then((res) => {
          console.log(res.data.data.content);
          this.listLoading1 = true;
          this.total1 = res.data.data.totalPages;
          this.datas = res.data.data.content
        });
      },

      checkSpider(){

      },
    },

    mounted: function () {
      function GetRequest() {
        let url = decodeURI(location.search);
        let theRequest = new Object();
        if (url.indexOf("?") != -1) {
          let str = url.substr(1);
          let strs = str.split("&");
          for(let i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
          }
        }
        return theRequest;
      }
      let urlData = GetRequest();

      let user = sessionStorage.getItem('user');
      user = JSON.parse(user);

      this.userId = user.id;
      this.userName = user.name;

      this.nodeId = urlData.a;

      this.getData(urlData.a)
    }
  };
</script>



<style>
    .toolbar{
        margin-top: 20px;
        background-color: white;
    }
</style>